<script setup lang="ts">
import { useLargenScreen } from '@/composables/useLargenScreen';
import headerNavBar from '@/components/headerNavBar.vue';
import { useNavBarHeight } from '@/composables/useNavBarHeight';
import bg1 from '@/assets/images/rewardLedger/bg_1.webp';
import ico2 from '@/assets/images/rewardLedger/ico_2.png';
import { useRoute } from 'vue-router';
import { userSendGiftList } from '@/common/api/rewardLedger';
import type { Item } from './types';
import type { OnPage } from '@/composables/useList';
import { useList } from '@/composables/useList';
import { copyHandler } from '@/utils/util';
import { showToast } from 'vant';

const { navBarHeight } = useNavBarHeight();
const [largenScreen] = useLargenScreen();
const route = useRoute();

const uid = (route.query?.uid as string) || '';

const server: OnPage = async (listConfig) => {
  const res = await userSendGiftList({ ...listConfig, userid: uid });
  const { list } = res.result;
  console.log('SendGiftList: ', list);
  return list;
};

const { list, loading, finished, error, refreshing, onLoad, onRefresh } = useList<Item>(server);

// 文本复制
const copyText = (text: string) => {
  const { errMsg } = copyHandler({ data: text });
  if (errMsg.indexOf('ok') > -1) {
    showToast('复制成功');
  }
  console.log(errMsg);
};
</script>
<template>
  <div
    class="rewardLedgerDetail bg-[length:100%_auto] bg-no-repeat scroll-hidden"
    :class="{ boxShadow: largenScreen }"
    :style="{ backgroundImage: `url(${bg1})`, paddingTop: `${navBarHeight}px` }"
  >
    <headerNavBar :placeholder="false" transparent scroll-el=".rewardLedgerDetail" />
    <van-config-provider :theme-vars="{ pullRefreshHeadTextColor: 'white' }">
      <van-pull-refresh v-model="refreshing" @refresh="onRefresh">
        <template #loading>
          <div class="text-white flex items-center justify-center">
            <van-loading type="spinner" color="#ffffff" size="16" />
            <span class="ml-1">加载中...</span>
          </div>
        </template>
        <div class="px-4 pt-5 pb-5">
          <div class="p-2 mb-2 bg-white rounded-lg">
            <div class="flex items-center" v-if="list.length">
              <van-image radius="10" width="55" height="55" fit="cover" :src="list[0].headimg" />
              <div class="flex-1 pl-3">
                <div class="text-sm mb-1">{{ list[0].nickname }}</div>
                <div class="text-xs flex items-center" @click="copyText(list[0].code)">
                  <span class="text-[#999999] mr-1">邀请码:{{ list[0].code }}</span>
                  <van-icon name="link-o" />
                </div>
              </div>
            </div>
            <van-list
              v-model:loading="loading"
              v-model:error="error"
              :finished="finished"
              finished-text="没有更多了"
              error-text="请求失败，点击重新加载"
              @load="onLoad"
            >
              <div
                class="bg-[#FFF5F7] flex items-center px-2 py-[6px] mt-3 rounded-lg"
                v-for="(item, index) in list"
                :key="index"
              >
                <span class="text-xs text-[#999999]">向</span>
                <van-image class="mx-1" width="14" height="14" :src="ico2" />
                <van-image
                  radius="10"
                  width="38"
                  height="38"
                  fit="cover"
                  lazy-load
                  :src="item.to_headimg + '?x-oss-process=image/resize,m_fixed,h_38,w_38'"
                />
                <div class="pl-2">
                  <div class="text-xs flex-1">
                    <span class="mr-1">{{ item.to_nickname }}</span>
                    <span class="text-[#999999]">打赏礼物消耗</span>
                    <span class="text-[#EC2D69]">{{ item.price }}积分</span>
                  </div>
                  <div class="flex items-center text-xs justify-between">
                    <div class="flex items-center" @click="copyText(item.to_code)">
                      <span class="text-[#999999] mr-1">邀请码:{{ item.to_code }}</span>
                      <van-icon name="link-o" />
                    </div>
                    <div class="text-[#999999]">{{ item.crt_time }}</div>
                  </div>
                </div>
              </div>
              <div class="pt-5" v-if="finished && !list.length">
                <van-empty />
              </div>
            </van-list>
          </div>

          <!-- 底部安全区 -->
          <div class="van-safe-area-bottom"></div>
        </div>
      </van-pull-refresh>
    </van-config-provider>
    <!-- <div v-else>
      <van-empty class="!pt-14" description="暂无数据" />
    </div> -->
    <!-- 底部安全区 -->
    <div class="van-safe-area-bottom"></div>
  </div>
</template>
<style lang="less" scoped>
.rewardLedgerDetail {
  overflow-y: auto;
  background-color: #f6f6f6;
  height: 100vh;
  max-width: 450px;
}
.rewardLedgerDetail.boxShadow {
  margin: 3vh auto;
  box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.18);
}
</style>
